<template>
  <el-dialog title :visible.sync="dialogVisible" width="80%" :append-to-body="true">
    <div>
      <el-row>
        <el-col style="text-align: center;">
          <el-input
            v-model.trim="searchMess"
            placeholder="输入车牌号"
            :style="'width:50%;margin:5px 0px;'"
            @keyup.enter.native="search"
          >
            <el-button slot="append" @click="search">搜索</el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :sm="4">
          <div class="g-title">车辆数目({{total}}个）</div>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="listData"
        tooltip-effect="dark"
        border
        style="width: 100%"
      >
        <el-table-column prop="carCode" label="车辆号码" align="center" width="100"></el-table-column>
        <el-table-column prop="carColor" label="颜色" align="center"></el-table-column>
        <el-table-column prop="buyPrice" label="购置价格(不含税)" align="center"></el-table-column>
        <el-table-column prop="discharge" label="排气量" align="center"></el-table-column>
        <el-table-column prop="regDate" label="登记日期" align="center" width="150"></el-table-column>
        <el-table-column prop="goNum" label="行驶里程" align="center"></el-table-column>
        <el-table-column prop="paiFang" label="排放标准" align="center"></el-table-column>
        <el-table-column prop="jingFei" label="经费来源" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <div>
              <el-button @click="selectCar(scope.row)" type="success" size="mini">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNo"
            @current-change="fetchData"
            @size-change="pageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { listJson } from "@/api/car";
export default {
  data: function() {
    return {
      dialogVisible: false,
      total: 0,
      pageNo: 1,
      pageSize: 10,
      listData: [],
      searchMess: ""
    };
  },
  methods: {
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    open() {
      this.fetchData();
      this.dialogVisible = true;
    },
    search() {
      this.pageNo = 1;
      this.fetchData();
    },
    selectCar(carData) {
      this.dialogVisible = false;
      this.$parent.$parent.onCarSelect(carData);
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        companyName: this.searchMess
      };
      let data = await listJson(params);
      this.listData.splice(0, this.listData.length, ...data.data);
      this.total = data.total;
    }
  }
};
</script>